import React from 'react';
import ReactDOM from 'react-dom';
import store from './store2'
import { Provider, connect } from 'react-redux'
import * as types from './store2/action_types'
console.log(store.getState())
class App extends React.Component {

  render() {
    return <div className=''>
      <h1 style={{ color: this.props.color }}>{this.props.count}</h1>
      <button onClick={this.props.add}>+</button>
      <input type="color" value={this.props.color} onChange={(e) => {
        this.props.colFn(e.target.value)
      }} />
    </div>;
  }
}
App = connect((state) => {
  return {
    count: state.qqq.count,
    color: state.ColorReducer.color
  }
}, (fn) => {
  return {
    add() {
      fn({ type: types.ADD, n: 100 })
    },
    colFn(val) {
      fn({ type: types.CHANGE_COLOR, col: val })
    }
  }
})(App)

ReactDOM.render(<Provider store={store}>
  <App />
</Provider>, document.getElementById('root'))